<template>
    <div class="family-container">
        <!-- 背景装饰 -->
        <div class="medical-bg"></div>

        <!-- 头部 -->
        <header class="app-header">
             <button class="back-button" @click="goBack" title="返回">
                <i class="fas fa-arrow-left"></i>
            </button>
            <div class="header-content">
                 <h1>家人绑定</h1>
            </div>
            <div class="header-placeholder"></div>
        </header>

        <!-- 主要内容区域 -->
        <main class="family-content">
            <div v-for="(member, index) in familyMembers" :key="index" class="member-item card-style">
                <div class="member-info">
                    <span class="member-name">{{ member.familyName }}</span>
                    <span class="member-phone">{{ member.phoneNumber }}</span>
                </div>
                <button class="delete-btn" @click="deleteMember(index)" title="删除">
                    <i class="fas fa-trash-alt"></i>
                </button>
            </div>

             <!-- 绑定按钮 -->
            <div class="bind-button-wrapper">
                <button class="bind-btn primary-button" @click="showDialog = true">
                    <i class="fas fa-plus"></i> 绑定家人
                </button>
            </div>
        </main>

        <!-- 输入弹窗 -->
        <div v-if="showDialog" class="dialog-overlay">
            <div class="dialog-content card-style">
                <h3>添加家人信息</h3>
                <div class="dialog-form-group">
                     <input v-model="newMember.name" placeholder="请输入家人姓名" />
                </div>
                 <div class="dialog-form-group">
                    <input v-model="newMember.phone" placeholder="请输入家人手机号" type="tel" />
                 </div>
                <div class="dialog-buttons">
                    <button class="dialog-btn cancel" @click="showDialog = false">取消</button>
                    <button class="dialog-btn confirm primary-button" @click="addMember">确认</button>
                </div>
            </div>
        </div>

        <!-- 底部导航 -->
        <navigation :active-tab="activeTab" @tab-change="handleTabChange" />
    </div>
</template>

<script>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router'; // 导入 useRouter
import Navigation from '@/components/Navigation.vue'; // 导入导航组件
import axios from 'axios';
import { getItem } from '@/components/Session.vue';

export default {
    components: { // 注册导航组件
        Navigation
    },
    setup() {
        const router = useRouter(); // 初始化 router
        const activeTab = ref('home'); // 或者根据实际情况设置，如果从 Home 进，保持 home
        const user = getItem("user")
         //模拟数据
        const familyMembers = ref()
        axios.get('/api/family/get',{
            params: {
                username: user.username
            }
        })
             .then(res=>{
                familyMembers.value=res.data.data
             })

        const showDialog = ref(false);
        const newMember = reactive({ name: '', phone: '' });

        const deleteMember = (index) => {


            // 可以添加确认弹窗
            console.log(familyMembers.value)
            if (confirm(`确定要删除家人"${familyMembers.value[index].familyName}"吗？`)) {
                 
                 axios.get('/api/family/delete',{
            params: {
                phone: familyMembers.value[index].phoneNumber
            }
        })
        location.reload()
           
            }
        };


        const addMember = () => {
            if (newMember.name && newMember.phone) { // 添加基本验证
                if (!/^1[3-9]\d{9}$/.test(newMember.phone)) {
                    alert('请输入有效的手机号码！');
                    return;
                }

                // 调用后端 API 添加家属
                fetch('api/family/add', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        familyName: newMember.name,
                        phoneNumber: newMember.phone,
                        username: user.username
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200) {
                        familyMembers.value.push({ ...newMember });
                        newMember.name = '';
                        newMember.phone = '';
                        showDialog.value = false;
                        alert(data.message); // 显示成功消息
                        location.reload()
                    } else {
                        alert(data.message); // 显示错误消息
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('网络请求失败，请稍后重试！');
                });
            } else {
                alert('姓名和手机号不能为空！');
            }
        };

        // 处理底部导航点击
        const handleTabChange = (newTab) => {
            activeTab.value = newTab;
            if (newTab === 'home') {
                router.push('/');
            } else if (newTab === 'mine') {
                router.push('/personal');
            }
        };

        // 返回上一页或主页
        const goBack = () => {
            // 尝试返回上一页，如果历史记录为空则返回主页
             if (window.history.length > 1) {
                 router.go(-1);
             } else {
                 router.push('/');
             }
        };

        return {
            familyMembers,
            showDialog,
            newMember,
            deleteMember,
            addMember,
            activeTab,
            handleTabChange,
            goBack
        };
    }
}
</script>

<style scoped>
.family-container {
    min-height: 100vh;
    max-width: 100vw;
    width: 100%;
    background-color: #f8f9fa;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
    padding-bottom: 20vw;
}

.app-header {
    background: linear-gradient(135deg, #4CAF50, #2196F3);
    color: white;
    padding: 4vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

.back-button {
    background: none;
    border: none;
    color: white;
    font-size: 5vw;
    cursor: pointer;
    padding: 2vw;
    margin-left: -2vw;
    line-height: 1;
}

.back-button:hover {
    opacity: 0.8;
}

.header-content {
    text-align: center;
    flex-grow: 1;
}

.header-content h1 {
    color: white;
    font-size: 4.5vw;
    font-weight: 600;
    margin: 0;
}

.header-placeholder {
    width: 10vw;
    visibility: hidden;
}

.family-content {
    flex: 1;
    padding: 4vw;
    overflow-y: auto;
    z-index: 1;
}

.card-style {
    background: white;
    border-radius: 3vw;
    box-shadow: 0 0.5vw 2vw rgba(0, 0, 0, 0.05);
}

.member-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4vw;
    margin-bottom: 3vw;
    transition: transform 0.2s;
}

.member-item:hover {
    transform: translateY(-0.5vw);
}

.member-info {
    display: flex;
    flex-direction: column;
}

.member-name {
    font-weight: 600;
    color: #333;
    font-size: 4vw;
    margin-bottom: 1vw;
}

.member-phone {
    color: #666;
    font-size: 3vw;
}

.delete-btn {
    color: #f44336;
    background: none;
    border: none;
    padding: 2vw;
    cursor: pointer;
    font-size: 5vw;
    line-height: 1;
    transition: transform 0.2s;
}

.delete-btn:hover {
    transform: scale(1.1);
}

.bind-button-wrapper {
    padding: 4vw 0;
}

.primary-button {
    width: 100%;
    padding: 4vw;
    background: linear-gradient(135deg, #4CAF50, #2196F3);
    color: white;
    border: none;
    border-radius: 4vw;
    font-size: 4vw;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2vw;
    box-shadow: 0 0.5vw 2vw rgba(0, 0, 0, 0.1);
}

.primary-button:hover {
    transform: translateY(-0.5vw);
    box-shadow: 0 0.8vw 2.5vw rgba(0, 0, 0, 0.15);
}

.primary-button:active {
    transform: translateY(0);
    box-shadow: 0 0.5vw 2vw rgba(0, 0, 0, 0.1);
}

.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.dialog-content {
    background: white;
    border-radius: 3vw;
    padding: 4vw;
    width: 80%;
    max-width: 500px;
    box-sizing: border-box;
}

.dialog-content h3 {
    font-size: 4.5vw;
    margin: 0 0 4vw 0;
    color: #333;
    text-align: center;
}

.dialog-form-group {
    margin-bottom: 4vw;
}

.dialog-form-group input {
    width: 100%;
    padding: 3vw;
    border: 1px solid #ddd;
    border-radius: 2vw;
    font-size: 3.5vw;
    box-sizing: border-box;
}

.dialog-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 4vw;
}

.dialog-btn {
    padding: 3vw 6vw;
    border-radius: 4vw;
    font-size: 3.5vw;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.dialog-btn.cancel {
    background: #f0f0f0;
    color: #666;
    border: none;
}

.dialog-btn.confirm {
    background: #2196F3;
    color: white;
    border: none;
}

.dialog-btn.cancel:hover {
    background: #e0e0e0;
}

.dialog-btn.confirm:hover {
    background: #1976D2;
}

/* 响应式调整 */
@media screen and (max-width: 320px) {
    .member-name {
        font-size: 3.5vw;
    }

    .member-phone {
        font-size: 2.8vw;
    }

    .delete-btn {
        font-size: 4vw;
        padding: 1.5vw;
    }

    .primary-button {
        font-size: 3.5vw;
        padding: 3.5vw;
    }

    .dialog-content h3 {
        font-size: 4vw;
    }

    .dialog-form-group input {
        font-size: 3vw;
        padding: 2.5vw;
    }

    .dialog-btn {
        font-size: 3vw;
        padding: 2.5vw 5vw;
    }
}
</style>